<template>
  <div class="login flex_d-column flex-item_f-1 flex_j_c-center flex_a_i-center">
    <transition name="el-zoom-in-center" mode="out-in">
      <Panel v-if="visible">
        <LoginForm></LoginForm>
        <el-button class="margin_t-18 width-full" @click="changeHandle">未有账号？去注册</el-button>
        <Other class="margin_t-20"></Other>
      </Panel>
      <Panel v-else>
        <RegisterForm></RegisterForm>
        <el-button class="margin_t-18 width-full" @click="changeHandle">已有账号？去登录</el-button>
      </Panel>
    </transition>
  </div>
</template>

<script setup>
import Panel from './components/panel/index.vue'
import LoginForm from './components/login-form/index.vue'
import RegisterForm from './components/register-form/index.vue'
import Other from './components/other/index.vue'
import { useUserStore } from '@/stores/modules/user'
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router' // 添加 useRouter 导入
import { getAuth } from '@/common/utils/storage'

const route = useRoute()
const visible = ref(true)
const router = useRouter() // 获取 router 实例

onMounted(() => {
  // 根据query参数初始化visible状态
  if (route.query.showRegister === 'true') {
    visible.value = false
  }
})

const userStore = useUserStore()

// 自动登录
onMounted(() => {
  // 从本地存储获取认证信息
  const authData = getAuth()
  
  // 检查是否有有效的token和用户信息
  if (authData.token && authData.userInfo) {
    // 更新store状态
    userStore.$state = {
       ...userStore.$state,
      ...authData.userInfo,
      token: authData.token,
      online: true
    }
    // 跳转到会话页面
    router.push({ name: 'conversation' })
  }
})

const changeHandle = () => {
  visible.value = !visible.value
}
</script>

<style lang="scss" scoped>

</style>
